<template>
  <el-card class="box-card">
    <template #header>
      <el-radio-group
        v-model="showIndex"
        size="mini"
      >
        <el-radio-button
          v-for="(item, index) in iconList"
          :key="index"
          :label="item.title"
        >
        </el-radio-button>
      </el-radio-group>
    </template>
    <el-alert
      title="点击图标复制代码"
      type="info"
      class="d2-m-10"
      style="width: auto;"
    />
    <el-row>
      <el-col
        v-for="(iconItem, iconIndex) in iconShow"
        :key="iconIndex"
        :span="4"
        class="p-2.5"
      >
        <icon-cell :icon="iconItem" :type="showIndex" />
      </el-col>
    </el-row>
  </el-card>
</template>
<script lang="ts">
import {
  defineComponent,
  onMounted,
  ref,
  computed,
} from 'vue';
import {
  ElCard,
  ElRadioGroup,
  ElRadioButton,
  ElAlert,
} from 'element-plus';
import { IconCell } from '@/components';

export default defineComponent({
  name: 'IconList',
  props: {},
  components: {
    [ElCard.name]: ElCard,
    [ElRadioGroup.name]: ElRadioGroup,
    [ElRadioButton.name]: ElRadioButton,
    [ElAlert.name]: ElAlert,
    [IconCell.name]: IconCell,
  },
  setup() {
    const iconList = ref<Array<{ title: string; icon: string[] }>>([]);
    const showIndex = ref<string>('可旋转');
    onMounted(() => {
      fetch('/icon-list.json')
        .then(ret => ret.json())
        .then(res => {
          iconList.value = res;
        });
    });
    const iconShow = computed(() => {
      const aShower = iconList.value.filter(
        item => item.title === showIndex.value,
      );
      return aShower.length > 0 ? aShower[0].icon : [];
    });
    console.log(iconShow);
    return {
      iconList,
      showIndex,
      iconShow,
    };
  },
});
</script>
<style lang=""></style>
